<template>
  <div class="left">
    <el-row class="tac">
      <el-col :span="24">
        <el-scrollbar height="92vh">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            :router="true"
            style="overflow: hidden"
          >
            <el-sub-menu
              class=""
              v-for="oneLayer of leftMenu"
              :index="oneLayer.index"
            >
              <template #title>
                <el-icon>
                  <icon-menu />
                </el-icon>
                <span>{{ oneLayer.name }}</span>
              </template>
              <el-sub-menu
                v-for="twoLayer of oneLayer.children"
                :index="twoLayer.index"
              >
                <template #title>
                  <span>{{ twoLayer.name }}</span>
                </template>
                <el-menu-item
                  v-for="threeLayer of twoLayer.children"
                  :index="threeLayer.index"
                >
                  <template #title>
                    <span>{{ threeLayer.name }}</span>
                  </template>
                </el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";
import { Ref, ref } from "vue";
import constraint, { Menu } from "@/data/constrant";

const leftMenu: Ref<Array<Menu>> = ref(constraint.leftMenu);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>
<style lang="scss" coped>
.left {
  width: 13vw;
  height: 100%;
  background: rgb(43, 49, 56);
}
.el-menu {
  background-color: rgb(43, 49, 56) !important;
}


.el-menu .el-menu-item {
  font-size: 1vw !important;
}
// ::v-deep .el-sub-menu .el-menu-item{
//   font-size: 3vw !important;

// }
.el-menu .el-submenu__title {
  font-size: 2vw !important; /* 修改一级菜单文字大小 */
}
</style>
